<template>
  <div class="user-info">
    <el-card v-if="info != null" :body-style="{ padding: '0px' }" class="info-card">
      <div style="width: 100%; text-align: center;">
        <img
        :src='baseURL + "/usercenter/nil/image/"+edit.ProfilePhotoHash'
        class="user-image"/>
      </div>
      <el-row style="margin: 10px">
        <el-col :span="14" :offset="3">
          <input type="file" id="saveImage" name="myphoto"/>
        </el-col>
        <el-col :span="4">
          <el-button size="small" @click="uploadImg()">上传头像</el-button>
        </el-col>
      </el-row>
      <el-row style="width: 450px">
        <el-col :span="6" :offset="2"><div class="title">注册时间：</div></el-col>
        <el-col :span="10" :offset="2"><div class="content">{{sToT(info.Created)}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="3"><div class="title">邮箱：</div></el-col>
        <el-col :span="10" :offset="2"><div class="content">{{info.Email}}</div></el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="3"><div class="title">昵称：</div></el-col>
        <el-col :span="10" :offset="2" v-if="state == '查看'"><div class="content">{{info.Nickname}}</div></el-col>
        <el-col :span="10" :offset="2" v-else><el-input v-model="edit.Nickname" /></el-col>
      </el-row>
      <el-row>
        <el-col :span="5" :offset="3"><div class="title">手机号：</div></el-col>
        <el-col :span="10" :offset="2" v-if="state == '查看'"><div class="content">{{info.Mobile}}</div></el-col>
        <el-col :span="10" :offset="2" v-else><el-input v-model="edit.Mobile" /></el-col>
      </el-row>
      <el-row>
        <el-col :span="8" :offset="13" style="margin-top: 20px">
          <div class="active" v-if="state == '查看'">
            <el-button type="primary" @click="stateChange('编辑')">编辑</el-button>
            <el-button @click="pswdEditDialog()">修改密码</el-button>
          </div>
          <div class="active" v-else>
            <el-button @click="stateChange('查看')">取消</el-button>
            <el-button @click="commitEdit()" type="primary">保存</el-button>
          </div>
        </el-col>
      </el-row>
    </el-card>

    <el-dialog v-model="dialogFormFlag" title="修改密码">
        <form>
            <el-input style="margin: 5px 20px 5px; width: 200px" v-model="pswdEdit" placeholder="输入密码" show-password/><br>
            <el-input style="margin: 5px 20px 5px; width: 200px" v-model="pswdEditRe" autocomplete="off" placeholder="重复输入密码" show-password/><br>
            <el-input style="margin: 5px 20px 5px; width: 100px" v-model="captcha" autocomplete="off" placeholder="验证码"/><el-button size="small" style="height: 32px;width:80px" @click="captchaGet()">发送验证码</el-button><br>
        </form>
        <template #footer>
            <span>
                <el-button @click="dialogFormClose()">取消</el-button>
                <el-button type="primary" @click="commitPswd()"
                >提交</el-button>
            </span>
        </template>
    </el-dialog>
  </div>
</template>

<script>
import { serverConfig } from '../http/config/index'
import { userInfo, userEdit, editPswd, upload } from '../http/api/user'
import { captcha } from '../http/api/email'

export default {
  data() {
    return {
      info: null,
      edit: null,
      cacheImg: null,

      state: '查看',
      dialogFormFlag: false,

      pswdEdit: null,
      pswdEditRe: null,
      captcha: null,

      baseURL: serverConfig.baseURL
    }
  },
  created: function() {
    let that = this
    userInfo()
    .then(res => {
      console.log(res)
      that.info = res.data.data
      that.edit = JSON.parse(JSON.stringify(res.data.data))
    })
  },
  methods: {
    sToT: function(timeStamp) {
      let d = new Date(timeStamp)
      return d.getFullYear()+'/'+(d.getMonth()+1)+'/'+d.getDate()+' '+d.getHours()+':'+d.getMinutes()
    },
    stateChange: function(state) {
      this.state = state
    },
    commitEdit: function() {
      userEdit({
        nickname: this.edit.Nickname,
        mobile: this.edit.Mobile,
        profilePhotoHash: this.edit.ProfilePhotoHash
      })
      .then(res => {
        if (res.data.code == 1200) {
          ElMessage({
            showClose: true,
            type: 'success',
            message: '修改成功'
          })
        } else if (res.data.code == 1201) {
          ElMessage({
            showClose: true,
            type: 'error',
            message: res.data.data
          })
        }
      })
    },
    pswdEditDialog: function() {
      this.dialogFormFlag = true
    },
    dialogFormClose: function() {
      this.dialogFormFlag = false
    },
    commitPswd: function() {
      if (!this.pswdEdit || !this.pswdEditRe || !this.captcha) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '空输入'
        })
      } else if (this.pswdEdit != this.pswdEditRe) {
        ElMessage({
          showClose: true,
          type: 'error',
          message: '两次密码输入不一致'
        })
      } else {
        editPswd({
          email: this.info.Email,
          captcha: this.captcha,
          pwd: this.pswdEdit
        })
        .then(res => {
          if (res.data.code == 1200) {
            ElMessage({
              showClose: true,
              type: 'success',
              message: '修改成功'
            })
          }
          this.dialogFormFlag = false
        })
      }
    },
    captchaGet: function() {
      captcha({
        email: this.info.Email,
        operate: '修改密码'
      })
      .then(res => {
        if (res.data.code == 1200) {
          ElMessage({
            showClose: true,
            type: 'success',
            message: '已发送，请检查邮箱'
          })
        }
      })
    },
    uploadImg: function() {
      let x = document.getElementById('saveImage').files[0]
      console.log(x)
      let params = new FormData()
      params.append('upload',x,x.name)
      upload(params)
      .then(res => {
        this.edit.ProfilePhotoHash = res.data.data
      })
    }
  }
}
</script>

<style lang="less" scoped>
  .user-info {
    .info-card {
      width: 500px;
      max-width: 90vw;
      height: 600px;
      background-color: rgba(0, 0, 0, 0.3);
      margin: 20px auto;
      display: flex;
      flex-direction: column;
      justify-content: space-around;
      align-items: center;

      .user-image {
        height: 160px;
        border-radius: 10px;
      }
      .title {
        text-align: right;
        line-height: 32px;
      }
      .content {
        line-height: 32px;
      }
      .active {
        display: flex;
        flex-direction: row;
        justify-content: flex-end;
      }
    }
  }
</style>